<template>
	<view v-if="desc.name" :style="theme">
		<view class="banner" :style="{backgroundImage: 'url(' + desc.fullImgurl + ')'}"
			@click="previewImg(desc.fullImgurl)"></view>
		<view v-if="desc.secKillInfo && desc.secKillInfo.type == '0'" class="miaosha"
			:style="{backgroundImage: 'url(' + imgHost + '/miaosha_bgbg.png)'}">
			<view class="left">
				<view class="cnt flex">
					<image :src="imgHost + '/ic_miaosha@2x (1).png'"></image>
					<view v-if="desc.secKillInfo.surplus !='不限制'">
						仅剩{{desc.secKillInfo.surplus || 0}}件
					</view>
					<view v-else>不限制</view>
				</view>
				<view class="priceCnt f26 cf mt10">
					<text>秒杀价</text>
					<text>¥</text>
					<text>{{desc.secKillInfo.discountPrice || 0}}</text>
					<text>¥{{desc.price || 0}}</text>
				</view>
			</view>
			<view class="right">
				<view class="cf f24">
					{{desc.secKillInfo.status == '0'?'距活动开始：' :desc.secKillInfo.status == '1'? '距活动结束：':'活动已结束'}}
				</view>
				<u-count-down :time="desc.secKillInfo.duration * 1000" format="DD:HH:mm:ss" autoStart millisecond
					@change="onChange" @finish="getDetail">
					<view class="time">
						<text v-if="timeData.days && timeData.days > 0" class="time__item">{{ timeData.days }}</text>
						<text class="jg">天</text>
						<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.minutes }}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.seconds }}</text>
					</view>
				</u-count-down>
			</view>
		</view>
		<view v-if="desc.secKillInfo && desc.secKillInfo.type == '1'" class="zhekou"
			:style="{backgroundImage: 'url(' + imgHost + '/bg_zhekou@2x.png)'}">
			<image :src="imgHost + '/ic_hekou@2x.png'" class="left"></image>
			<view class="priceCnt cf">
				<view>
					<text>¥</text>
					<text>{{desc.secKillInfo.discountPrice || 0}}</text>
				</view>
				<view>原价 ¥{{desc.price || 0}}</view>
			</view>
			<view class="right">
				<view class="cf f24">
					{{desc.secKillInfo.status == '0'?'距活动开始：' :desc.secKillInfo.status == '1'? '距活动结束：':'活动已结束'}}
				</view>
				<u-count-down :time="desc.secKillInfo.duration * 1000" format="DD:HH:mm:ss" autoStart millisecond
					@change="onChange" @finish="getDetail">
					<view class="time">
						<text v-if="timeData.days && timeData.days > 0" class="time__item">{{ timeData.days }}</text>
						<text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
						<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.minutes }}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.seconds }}</text>
					</view>
				</u-count-down>
			</view>
		</view>
		<view class="head"
			:class="desc.secKillInfo && desc.secKillInfo.type == '0'?'ms':desc.secKillInfo && desc.secKillInfo.type == '1'?'zk':''">
			<view class="title" :class="desc.courseType=='1'?'': 'lv'">
				<text>{{desc.mealsType==0?"门票次数卡":desc.mealsType==1?"门票期限卡":desc.mealsType==3?"课程预约次卡":desc.mealsType==4?"课程预约期限卡":"预定次卡" }}</text>
				<view>{{desc.name}}</view>
			</view>
			<view class="info" v-if="desc.indate">有效期：{{desc.indate}}天</view>
			<view class="box_item_num">
				<text>购买数量：</text>
				<u-number-box v-model="num" button-size="26"></u-number-box>
			</view>
		</view>
		<block v-if="shopHome == 1 && desc.venue">
			<view class="shopVenueDetail flex mb2" @click="tzVenDetail(desc.venue)">
				<image :src="desc.venue && desc.venue.logo?desc.venue.logo:imgHost+'/default_changguan.jpg'" class="venImg"></image>
				<view class="venDetail flex flex_between">
					<view class="venDetailLeft">
						<view class="f30 c2 fw5">
							{{desc.venue.venueName}}
						</view>
						<view class="f26 c9" style="margin-top: 2rpx;">
							{{desc.venue.address}}
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="32rpx"></u-icon>
				</view>
			</view>
		</block>
		<view class="content">
			<view class="bt">套餐信息</view>
			<view class="sm">类型</view>
			<view class="nr">
				{{desc.mealsType==0?"门票次数卡":desc.mealsType==1?"门票期限卡":desc.mealsType==3?"课程预约次卡":desc.mealsType==4?"课程预约期限卡":"预定次卡" }}
			</view>
			<view v-if="desc.nums" class="sm">可用次数</view>
			<view v-if="desc.nums" class="nr">{{desc.nums}}次</view>
			<view class="sm">生效方式</view>
			<view class="nr">{{desc.validTimeInfo || '购买后生效'}}</view>
			<view v-if="desc.useTimeInfo" class="sm">时间段限制</view>
			<view v-if="desc.useTimeInfo" class="nr">{{desc.useTimeInfo}}</view>
			<view class="sm">适用场馆</view>
			<view class="nr">{{desc.useVenue || '全部场馆'}}</view>
			<view class="sm">适用项目</view>
			<view class="nr">{{desc.useProject || '全部项目'}}</view>
			
		</view>
		<view v-if="desc.content" class="content">
			<view class="f32 c2 fwb mb12">套餐描述</view>
			<view class="f28 c2">{{desc.content}}</view>
		</view>
		<!-- 占位 -->
		<view class="box_x"></view>
		<!-- 底部充值 -->
		<view class="box_footer">
			<view class="flex xieyi">
				<view class="checkboxBoxD" @click="isTy">
					<view class="checkboxBox" :class="isActive?'on':''">
						<u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
					</view>
				</view>
				<view>我已阅读并同意<text class="ztColor" @click="open">《套餐购买协议》</text></view>
			</view>
			<view class="box_active_footer">
				<view class="left">
					<view class="hj">
						<text>合计：</text>
						<block>
							<text v-if="desc.secKillInfo && (desc.secKillInfo.surplus == '不限制' || desc.secKillInfo.surplus >0)" class="fh">{{desc.secKillInfo.discountPrice && Number(desc.secKillInfo.discountPrice) >0?'¥':''}}</text>
							<text v-else class="fh">{{desc.price && Number(desc.price) >0?'¥':'' }}</text>
						</block>
						<block>
						  <text v-if="desc.secKillInfo && (desc.secKillInfo.surplus == '不限制' || desc.secKillInfo.surplus >0)" class="price" :class="desc.secKillInfo.discountPrice?'':'green f28i'">{{desc.secKillInfo.discountPrice || '免费' }}</text>
						  <text v-else class="price" :class="desc.price && Number(desc.price) >0?'':'green f28i'">{{desc.price && Number(desc.price) >0?desc.price :'免费' }}</text>
						</block>
					</view>
					<view v-if="desc.secKillInfo && (desc.secKillInfo.surplus == '不限制' ||desc.secKillInfo.surplus >0)" class="yj">
						原价<text :class="desc.price && Number(desc.price) >0?'':'green f28i'">{{desc.price && Number(desc.price) >0?desc.price :'免费' }}</text>
					</view>
				</view>
				<view class="right">
					<view v-if="(desc.secKillInfo && desc.secKillInfo.status == '0') || (desc.secKillInfo && desc.secKillInfo.status == '1' && desc.secKillInfo.surplus < num)" class="yjBtn"
						@click="$noMultipleClicks(submit)"><text>原价购买</text></view>
					<view v-if="desc.secKillInfo && desc.secKillInfo.isNotify == '0' && desc.secKillInfo.status == '0'"
						class="dyBtn on" @click="$noMultipleClicks(dyBtn)">
						开抢提醒
					</view>
					<view v-if="desc.secKillInfo && desc.secKillInfo.isNotify == '1' && desc.secKillInfo.status == '0'"
						class="dyBtn hui">
						已设置提醒
					</view>
					<view
						v-if="desc.secKillInfo && (desc.secKillInfo.surplus == '不限制' ||(desc.secKillInfo.surplus >0 && desc.secKillInfo.surplus >=num)) && desc.secKillInfo.status == '1'"
						class="qgBtn" @click="$noMultipleClicks(qgBtn)"><text>立即抢购</text></view>
					<view
						v-if="desc.secKillInfo && desc.secKillInfo.surplus != '不限制' && desc.secKillInfo.surplus  < num && desc.secKillInfo.status == '1' && desc.secKillInfo.surplus > 0"
						class="qgBtn hui"><text>库存不足</text></view>
					<view
						v-if="desc.secKillInfo && desc.secKillInfo.surplus != '不限制' && desc.secKillInfo.surplus  < num && desc.secKillInfo.status == '1' && desc.secKillInfo.surplus == 0"
						class="qgBtn hui"><text>抢光了</text></view>
					<view v-if="!desc.secKillInfo || desc.secKillInfo.status == '2'" class="gmBtn"
						@click="$noMultipleClicks(submit)"><text>立即购买</text></view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="onClickHide" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="open">《套餐购买协议》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="onClickHide">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				num: 1,
				desc: {},
				time: '',
				isActive: false,
				xy: '',
				type: 0,
				show: false,
				timeData: {},
				pdQg: false
			}
		},
		onLoad(ops) {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.id = ops.id
			this.getDetail()
		},
		onShareAppMessage(e) {
			let that = this
			if(this.desc && this.desc.secKillInfo && this.desc.secKillInfo.imageUrl) {
				return {
					imageUrl: this.desc.secKillInfo.imageUrl
				}
			} else {
				return {
					title: '套餐详情',
					path: `/pages/setmeal/detail?id=${that.id}`
				}
			}
		},
		onShareTimeline() {
			let that = this
			if(this.desc && this.desc.secKillInfo && this.desc.secKillInfo.imageUrl) {
				return {
					imageUrl: this.desc.secKillInfo.imageUrl
				}
			} else {
				return {
					title: '套餐详情',
					path: `/pages/setmeal/detail?id=${that.id}`
				}
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			tzVenDetail(item) {
				this.$store.commit('setVenueName', item.venueName);
				this.$store.commit('setVenueId', item.venueId);
				this.jump3('/pages/venue/indexShop?id=', item.venueId)
			},
			onChange(e) {
				this.timeData = e
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			isTy() {
				this.isActive = !this.isActive
			},
			open() {
				// this.isActive = true
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_MEAL&title=', '套餐购买协议')
			},
			onClickHide() {
				this.show = false
			},
			qrBtn() {
				this.isActive = true
				this.show = false
				if(this.pdQg) {
					this.qgBtn()
				} else {
					this.submit()
				}
			},
			submit() {
				if (!this.isActive) {
					this.pdQg = false
					this.show = true
					return false
				}
				this.$app.ajax({
					api: this.$api.mealsOnlinePayInfo(),
					data: {
						param: {
							venueId: this.venueId,
							memberId: this.userInfo.id,
							channelType: '01',
							mealsList: [{
								id: this.id,
								num: this.num
							}],
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.jump3('/pages/order/pay?type=4&orderId=', res.record.orderId)
					}
				}).catch(() => {})
			},
			dyBtn() {
				this.$app.ajax({
					api: this.$api.addSecNotify(),
					data: {
						param: {
							id: this.desc.secKillInfo.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('订阅成功')
						this.getDetail()
					}
				}).catch(() => {})
			},
			qgBtn() {
				if (!this.isActive) {
					this.pdQg = true
					this.show = true
					return false
				}
				this.$app.ajax({
					api: this.$api.mealsOnlinePayInfo(),
					data: {
						param: {
							venueId: this.venueId,
							memberId: this.userInfo.id,
							channelType: '01',
							isJoin: '1',
							mealsList: [{
								id: this.id,
								num: this.num
							}],
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.jump3('/pages/order/pay?type=4&orderId=', res.record.orderId)
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.mealsOnlineInfo(),
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let obj = res.record
						// obj.secKillInfo = {
						// 	"id": 1,
						// 	"type": "0",
						// 	"status": "1",
						// 	"discountPrice": 10,
						// 	"surplus": "不限制",
						// 	"duration": 1866422,
						// 	"isNotify": "1"
						// }
						this.desc = obj
					}
				}).catch(() => {})
			}

		}

	}
</script>


<style scoped lang="scss">
	.banner {
		width: 100%;
		height: 422rpx;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.head {
		margin-top: -30rpx;
		background-color: #ffff;
		margin-bottom: 20rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding: 24rpx 30rpx 30rpx;
		background-color: #fff;
		border-radius: 8rpx;

		&.ms {
			margin-top: -70rpx;
		}

		.title {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			display: flex;
			align-items: center;

			text {
				height: 40rpx;
				line-height: 40rpx;
				background: $color;
				border-radius: 8rpx;
				display: inline-block;
				padding: 0 10rpx;
				margin-right: 20rpx;
				font-size: 22rpx;
				color: #ffff;
			}

		}

		.info {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 15rpx;
			line-height: 1.5;
		}

		.box_item_num {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			box-sizing: border-box;
			margin-top: 20rpx;

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.content {
		background-color: #ffff;
		margin-bottom: 20rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 8rpx;

		.bt {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bolder;
			color: #222222;
		}

		.sm {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 1;
			margin-top: 24rpx;
		}

		.nr {
			font-size: 28rpx;
			margin-top: 16rpx;
			line-height: 1.5;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.box_x {
		height: 210rpx;
	}

	.box_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #F7F7F7;
		z-index: 99;

		.xieyi {
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background: $xybj;
		}

		.box_active_footer {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background: #ffffff;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 80rpx;

				.hj {
					text {
						color: #FE2C2E;

						&:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
							width: 90rpx;
						}

						&.fh {
							font-size: 24rpx;
						}

						&.price {
							font-weight: bolder;
							font-size: 36rpx;
						}
					}
				}

				.yj {
					padding-left: 90rpx;
					text-decoration: line-through;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.right {
				display: flex;
				justify-content: flex-end;
				flex: 1;

				view {
					margin-left: 20rpx;
				}

				.gmBtn {
					flex: none;
					background: $color;
					color: #fff;
					width: 200rpx;
					height: 80rpx;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
				}

				.qgBtn {
					flex: none;
					background: $color;
					color: #fff;
					width: 200rpx;
					height: 80rpx;
					background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;

					&.hui {
						opacity: 0.5;
					}
				}

				.dyBtn {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #FFFFFF;
					width: 200rpx;
					height: 80rpx;
					background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;

					&.hui {
						opacity: 0.5;
					}

					&.on {
						-webkit-animation-name: scaleDraw;
						/*关键帧名称*/
						-webkit-animation-timing-function: ease-in-out;
						/*动画的速度曲线*/
						-webkit-animation-iteration-count: infinite;
						/*动画播放的次数*/
						-webkit-animation-duration: 5s;
						/*动画所花费的时间*/
					}
				}

				.yjBtn {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #FFFFFF;
					width: 200rpx;
					height: 80rpx;
					background: linear-gradient(270deg, #FEA82C 0%, #FFD34D 100%);
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}

	}

	.miaosha {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		width: 100%;
		height: 220rpx;
		box-sizing: border-box;
		padding: 16rpx 30rpx 0 28rpx;
		display: flex;
		justify-content: space-between;

		.left {
			.cnt {
				image {
					width: 210rpx;
					height: 50rpx;
				}

				view {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FE2C2E;
					padding: 0 8rpx;
					line-height: 42rpx;
					background: #FFFFFF;
					position: relative;
					border-radius: 8rpx;
					margin-left: 18rpx;

					&::before {
						position: absolute;
						content: "";
						width: 0;
						height: 0;
						top: 11rpx;
						left: -10rpx;
						border-top: 10rpx solid transparent;
						border-right: 10rpx solid #fff;
						border-bottom: 10rpx solid transparent;
					}
				}
			}

			.priceCnt {
				line-height: 50rpx;

				text {
					display: inline-block;

					&:nth-of-type(2) {
						margin-left: 4rpx;
					}

					&:nth-of-type(3) {
						font-size: 48rpx;
						font-weight: bolder;
					}

					&:nth-of-type(4) {
						margin-left: 8rpx;
						text-decoration: line-through;
						color: rgba(255, 222, 222, 1);
					}
				}

			}
		}

		.right {
			text-align: right;
			box-sizing: border-box;
			padding-top: 22rpx;

			.f24 {
				margin-bottom: 10rpx;
			}

			.time {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #fff;

				text {
					display: inline-block;

					&.jg {
						margin: 0 8rpx;
					}

					&.time__item {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						background: #fff;
						border-radius: 16rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FE2C2E;
					}
				}
			}
		}
	}



	.zhekou {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		width: 690rpx;
		height: 160rpx;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;

		.left {
			width: 68rpx;
			height: 68rpx;
			padding-right: 26rpx;
			flex: none;
			margin-right: 26rpx;
			border-right: 1px solid rgba(255, 255, 255, 0.26);
		}

		.priceCnt {
			flex: 1;

			view {
				line-height: 40rpx;

				text {
					display: inline-block;
					color: #fff;

					&:nth-of-type(1) {
						font-size: 26rpx;
					}

					&:nth-of-type(2) {
						font-size: 36rpx;
						font-weight: bolder;
						margin-left: 10rpx;
					}

				}

				&:nth-of-type(2) {
					line-height: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					text-decoration: line-through;
					color: #FFDEDE;
				}
			}
		}

		.right {
			text-align: right;
			box-sizing: border-box;

			.f24 {
				margin-bottom: 10rpx;
				line-height: 1;
			}

			.time {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #fff;

				text {
					display: inline-block;

					&.jg {
						margin: 0 8rpx;
					}

					&.time__item {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						background: #fff;
						border-radius: 16rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FE2C2E;
					}
				}
			}
		}
	}

	/*css部分*/
	@keyframes scaleDraw {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.06);
			/*放大1.06倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.06);
		}
	}
</style>